<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绩效管理</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/wwl/icon/iconfont.css" />
    <link rel="stylesheet" href="../css/wwl/demo.css" />
    <link rel="stylesheet" href="../css/performance-management/performance-management.css">
    <style>
    
    </style>
  </head>

  <body>
    <nav class="nav-ct">
      <div class="nav-hd">
        <span class="iconfont icon-oabangong"></span>
        <span class="title">办公后台系统</span>
      </div>
      <div class="center">
        <ul class="nav-content">
          <li><a href="../code/index.html">工作台</a></li>
          <li><a href="#">数据大屏</a></li>
          <li><a href="">员工</a></li>
          <li><a href="../code/组织管理.html">组织</a></li>
          <li><a href="#">招聘</a></li>
          <li><a href="#">考勤</a></li>
          <li><a href="../code/薪资/薪资.html">薪酬</a></li>
          <li>
            <a href="../code/社保公积金/参保方案.html">社保公积金</a>
          </li>
          <li>
            <a href="#">绩效</a>
          </li>
          <li><a href="../code/training-index.html">培训</a></li>
          <li><a href="../code/审核.html">审批</a></li>
          <li><a href="../code/权限-用户.html">权限设置</a></li>
        </ul>
      </div>
    </nav>
    <!-- <div class="ct-box">
      <div class="nav-ct-2">
        <ul class="nav-ct-menu">
          <li class="title">
            绩效管理
            <ul>
              <li><a href="">考核计划</a></li>
              <li><a href="">考核进度</a></li>
              <li><a href="">员工绩效档案</a></li>
            </ul>
          </li>
        </ul>
      </div> -->
    <!-- <div class="box">
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
      </div>
    </div>  -->

    <div class="plan-box">
      <div class="row">
        <div class="col-md-2 left-plan">
          <h5 style="color: white; text-align: center">绩效管理</h5>
          <ul class="nav nav-pills nav-stacked">
            <li><a href="#">考核计划</a></li>
            <li><a href="#">考核进度</a></li>
            <li><a href="#">员工绩效档案</a></li>
          </ul>
        </div>
        <div class="right-box">
          <div class="col-md-9 right-plan">
            <iframe
              src="./appraise-plan.html"
              frameborder="0"
              name="iframe_a"
            ></iframe>
            <iframe
              src="./appraise-progress.html"
              frameborder="0"
              name="iframe_b"
            ></iframe>
            <iframe
              src="./appraise-performance-record.html"
              frameborder="0"
              name="iframe_c"
            ></iframe>
          </div>
        </div>
      </div>
    </div>

    <script>
      $(".nav li").on("click", function (event) {
        // const target = event.target.target;
        // const href = event.target.href;
        // const arr = [];
        // const iframeCount = $(".right-plan>iframe").length;
        // for (let i = 0; i < iframeCount; i++) {
        //   const arr = iframeCount[i];
        //   const iframeName = $(".right-plan>iframe").eq(i).attr("name");
        //   if (target === iframeName[i]) {
        //     $(".right-plan>iframe").eq(i).src = href;
        //   }
        // }

        var index = $(this).index();
        $(".right-plan>iframe").eq().show();
        //让内容框的第 index 个显示出来，其他的被隐藏
        $(".right-plan>iframe").eq(index).show().siblings().hide();
      });
    </script>
  </body>
</html>
